<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>Kukbuk - Lista książek</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css"
	href="../../../css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../../../css/custom.css"
	th:href="@{/css/custom.css}" />
</head>

<body>
	<!-- TOP MENU -->
	<div th:substituteby="template :: top-menu"></div>
	<!-- /TOP MENU -->

	<!-- MAIN CONTAINER -->
	<div class="container">
		<div class="row">
			<div class="page-header">
				<h1>Moje książki</h1>
			</div>
		</div>


		<div class="row"
			th:if="${#bools.isFalse(cookbooks) or #lists.isEmpty(cookbooks)}">
			<h2>Brak książek</h2>
		</div>


		<div class="row" th:if="${#bools.isTrue(currentBook)}">
			<div class="offset2">
				<div class="row">
					<div class="page-header">
						<h1 th:text="${currentBook.name}">Desery</h1>
					</div>
				</div>
			</div>
		</div>


		<!-- MESSAGE BOXES -->
		<div class="row" th:include="template :: message-boxes"></div>
		<!-- /MESSAGE BOXES -->


		<div class="row"
			th:if="${#bools.isTrue(cookbooks) and not #lists.isEmpty(cookbooks)}">
			<div class="span2">
				<div class="tabbable tabs-left">
					<ul class="nav nav-tabs">
						<li th:each="book : ${cookbooks}"
							th:class="${beans.cookbookService.isCookbookActive(currentBook, book)}? 'active'">
							<a rel="popover" class="tooltip-please"
							th:attr="data-original-title=${book.name}, data-content=${book.description}"
							th:text="${book.name}"
							th:href="@{'/user/cookbook/list/' + ${book.id}}">Desery</a>
						</li>
					</ul>
				</div>
			</div>


			<div class="span10">
				<div class="row"
					th:if="${#bools.isFalse(recipes) or #lists.isEmpty(recipes)}">
					<h2>Brak przepisów</h2>
				</div>

				<div class="row"
					th:if="${#bools.isTrue(recipes) and not #lists.isEmpty(recipes)}">
					<h2>Przepisy</h2>
				</div>
				<!-- RECIPES -->
				<div class="row" th:substituteby="template :: recipes"></div>
				<!-- /RECIPES -->
			</div>
		</div>
	</div>
	<!-- /MAIN CONTAINER -->

	<!-- ======================================================== -->
	<!-- Scripts at bottom of page means faster loading times. -->
	<!-- Latest jQuery -->
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<!-- Bootstrap -->
	<script type="text/javascript" src="../../../js/bootstrap.min.js"
		th:src="@{/js/bootstrap.min.js}"></script>
	<!-- Custom -->
	<script type="text/javascript" src="../../../js/custom.js"
		th:src="@{/js/custom.js}"></script>
</body>
</html>